<!DOCTYPE html>
<html>
<head>
    <title>我的游记</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/userTravels.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>

    <script type="text/javascript">
        $(function () {
            //获取当前用户
            var user = JSON.parse(sessionStorage.getItem("user"));
            //总页数
            var pages = 1;

            //页面容量
            var pageSize = 3;

            //象征性定义
            var travelId = 0;
            //内容
            var collectionData = [];

            //获取游记当前页
            var currentInput = $("#currentPage");

            //获取游记
            function query() {
                var currentPage = currentInput.val();
                $.get("/users/" + user.id + "/myCollections",
                    {
                        currentPage: currentPage,
                        pageSize: pageSize,
                        travelId: travelId
                    },
                    function (data) {
                        var coverUrl = "";
                        var title = "";
                        var url = "";
                        for (var i = 0; i < data.list.length; i++) {
                            if (data.list[i].travel) {
                                coverUrl = data.list[i].travel.coverUrl;
                                title = data.list[i].travel.title;
                                url = "/travelContent.html?id=" + data.list[i].travel.id;
                            }
                            collectionData += '<dd>' +
                                '            <a href="' + url + '">' +
                                '                <img src="' + coverUrl + '">' +
                                '                <h6 class="title">' + title + '</h6>' +
                                '                <p>收藏时间: <span>' + data.list[i].collectTime + '</span>' +
                                '                </p>' +
                                '            </a>' +
                                '        </dd>';
                        }
                        $(".list").html(collectionData);
                        pages = data.pages;
                    });
                currentInput.val(parseInt(currentPage) + 1);
            }

            //默认查询一次
            query();
            //滚动到底部触发事件
            $(window).scroll(function () {
                if ($(window).height() + $(document).scrollTop() >= $(document).height()) {
                    if (currentInput.val() <= pages) {
                        query();
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            infoText: '已经到底部',
                            autoClose: 1000,
                            position: 'center'  // center: 居中; bottom: 底部
                        });
                    }
                }
            })
        })
    </script>
</head>

<body>
<input type="hidden" name="currentPage" id="currentPage" value="1">
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="profiles.html">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
            <span>游记收藏</span>
        </div>
        <div class="col"></div>
    </div>
</div>

<div class="container collections">
    <dl class="list">
    </dl>
</div>

</body>
</html>
